<template>
  <el-dialog
    title="课程预览"
    append-to-body
    center
    :visible.sync="show_video"
    @close="close"
    width="7.5rem"
  >
    <div class="container">
      <video
        controlslist="nodownload"
        oncontextmenu="return false"
        ref="video"
        :src="videoUrl"
        poster="imageUrl"
        controls
        autoplay
      ></video>
      <div>
        <div>
          <!-- <span>亚伦·弗兰克林泰切斯</span>
          <p>德克萨斯式烧烤</p>-->
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { setTimeout } from "timers";
export default {
  props: ["show", "imageUrl", "videoUrl"],
  data() {
    return {
      show_video: false
    };
  },
  methods: {
    close() {
      this.$refs.video.pause();
      this.$emit("close");
    }
  },
  watch: {
    show: {
      handler(res) {
        this.show_video = res;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  > video {
    width: 100%;
  }
  > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.2rem;
    > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: @title-size;
      p {
        color: @node-color;
        margin-left: 0.1rem;
      }
    }
  }
}
</style>
